<template>
    <div id="dialogFloorMessage">
        <el-dialog
            v-if="dialogFormVisible"
            :visible.sync="dialogFormVisible"
            :title="dialogTitle"
            width="620px"
            :close-on-click-modal="false"
        >
            <el-form
                ref="subForm"
                :inline="true"
                :model="submitFormData"
                class="search-form-inline"
                size="small"
                :label-position="labelPosition"
            >
                <!-- 
                    1联联购楼层创建，时间自行设定，不与活动时间关联
                    2设定联联购楼层时间时需校验，若楼层开始时间设置早于参与联联购活动的最早开始时间时，楼层的结束时间晚于联联购活动的最晚结束时间，前端不展示该楼层
                    3若设置楼层开始时间时，开始时间晚于联联购活动的最早开始时间，以及楼层的结束时间，早于联联购活动的最晚结束时间，设置时需校验，无法保存
                    4举例说明：若用户设置了3个联联购活动活动1，活动2，活动3，活动1的开始时间是6月21日，活动3的结束时间为7.23,则楼层的开始时间不得晚于6月21，楼层结束时间不得早于7.23
                    5楼层名称支持自定义，若未填写，则默认为该促销活动的名称，如联联购
                    6选择楼层模板之后，自带更多链接
                -->
                <el-form-item label="PC/APP">
                    <el-select v-model="submitFormData.pcOrApp">
                        <el-option
                            v-for="item in enums.pcOrApp"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-form-item label="活动名称" prop="activityName">
                        <el-input v-model="submitFormData.activityName" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="模板类型" prop="templateType">
                        <el-select
                            v-model="submitFormData.templateType"
                            @change="selectTemplateType($event)"
                        >
                            <el-option
                                v-for="item in templateTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="模板图片">
                        <!--  -->
                        <img
                            src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2798791900,2905206626&fm=26&gp=0.jpg"
                            alt
                            title="模板图片"
                            width="150"
                            height="150"
                        />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-model="submitFormData.startTime"
                            type="datetime"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="结束时间">
                        <el-date-picker
                            v-model="submitFormData.endTime"
                            type="datetime"
                            style="width: 100%;"
                        ></el-date-picker>
                    </el-form-item>
                </el-row>
                <!-- 超级团购 -->
                <el-row v-if="submitFormData.templateType==1">
                    <p>超级团购楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
                <!-- 特价专区 -->
                <el-row v-if="submitFormData.templateType==2">
                    <el-form-item label="特价专区楼层宣传语">
                        <el-input type="textarea" v-model="submitFormData.slogan"></el-input>
                    </el-form-item>
                </el-row>
                <!-- 团购一口价 -->
                <el-row v-if="submitFormData.templateType==3">
                    <p>团购一口价楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
                <!-- 预售专区 -->
                <el-row v-if="submitFormData.templateType==4">
                    <p>预售专区楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
                <!-- 新品专区 -->
                <el-row v-if="submitFormData.templateType==5">
                    <p>新品专区楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
                <!-- 控销专区 -->
                <el-row v-if="submitFormData.templateType==6">
                    <p>控销专区楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
                <!-- 秒杀 -->
                <el-row v-if="submitFormData.templateType==7">
                    <p>限时秒杀楼层宣传图</p>
                    <elUpload
                        :autoUpload="false"
                        :limit="1"
                        :viewer="true"
                        :fileList="submitFormData.fileList1"
                    ></elUpload>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import elUpload from "@/components/xForm/elUpload";
import apisFloorMessage from "@/api/shopDecoration/floorMessage"; //楼层管理列表接口
export default {
    name: "dialogFloorMessage",
    components: { elUpload, apisFloorMessage },
    data() {
        return {
            tableHeight: 0,
            dialogFormVisible: false,
            dialogTitle: "",
            labelPosition: "right",
            submitFormData: {
                pcOrApp: 1,
                activityName: "",
                templateType: "",
                startTime: "",
                endTime: "",
                slogan: "",
            },
            //上传图片
            fileList1: [],
            //模板类型
            templateTypeList: [
                {
                    value: "1",
                    label: "超级团购",
                    templateType: "0",
                },
                {
                    value: "2",
                    label: "特价专区",
                    templateType: "1",
                },
                {
                    value: "3",
                    label: "一口价",
                    templateType: "4",
                },
            ],
        };
    },
    methods: {
        selectTemplateType(e) {
            this.submitFormData.templateType = e;
        },
        // templateTypeList
        open(data) {
            let _this = this;
            // _this.templateTypeList = templateTypeList;
            if (data && data.id) {
                _this.dialogTitle = "修改楼层";
                apisFloorMessage.getDetail(data.id).then((res) => {
                    this.submitFormData = res.data.list;
                    this.submitFormData.pcOrApp = parseInt(
                        this.submitFormData.pcOrApp
                    );
                });
            } else {
                _this.dialogTitle = "新增楼层";
                _this.submitFormData = {};
                _this.submitFormData.pcOrApp = 1;
            }

            this.dialogFormVisible = true;
        },
        submitForm() {
            apisFloorMessage.submitForm(this.submitFormData).then((d) => {
                this.dialogFormVisible = false;
                this.$parent.getList();
            });
        },
    },
};
</script>
<style lang="" scoped>
</style>